<template>
    
    <el-container style="background-color: #F3F3F4" id="demo">
        <el-header>
            <div class="div_t">
            <span style="color: #70AD47; font-size: 25px; font-weight: 700">测试报告</span>
            </div>
        </el-header>
        <!-- <el-main> -->
            <!-- <router-view></router-view> -->
            <!-- <div style="background-color: #F3F3F4"></div> -->
            <!-- <el-collapse  @change="handleChange" accordion> -->
            <el-collapse v-model="activeNames"  @change="handleChange" style="padding: 20px;">
                <el-collapse-item name=1 class="collapse1">
                    <template slot="title">
                      <h5 style="color: #c4c4c4; font-size: 16px">报告汇总</h5>
                    </template>
                    <div class="div_line">
                    <el-divider></el-divider>
                    <div class="div1">
                        <div style="margin-top: 10px">
                            <el-form ref="form" :model="info" label-width="80px">
                              <el-form-item label="总数" style="margin-left:35%;font-size: 30px; ">

                                <!-- <el-input v-model="info.Count" ></el-input> -->
                                <span style="margin-left:40px;font-size: 50px; ">{{info.Count}}</span>
                              </el-form-item>
                              <el-form-item label="成功数" style="margin-left:35%;color: green;font-size: 30px;">
                                <template slot-scope="scope">
                                <!-- <el-input v-model="info.success" style="margin-left: 10px;color: green"></el-input> -->
                                <span style="margin-left:40px;font-size: 50px; color: green">{{info.success}}</span>
                                </template>
                              </el-form-item>
                              <el-form-item label="失败数" style="margin-left:35%;font-size: 30px;">
                                <!-- <el-input v-model="info.error" style="margin-left:40%;color: red"></el-input> -->
                                <span style="margin-left:40px;font-size: 50px; color: red">{{info.error}}</span>
                              </el-form-item>
                              <el-form-item :formatter="FormartTime" label="开始时间" style="margin-left:35%;font-size: 30px;">
                                <!-- <el-input v-model="info.start" ></el-input> -->
                                <span style="margin-left:40px; ">{{info.start}}</span>
                              </el-form-item>
                              <el-form-item :formatter="FormartTime" label="结束时间" style="margin-left:35%;font-size: 30px;">
                                <!-- <el-input v-model="info.end" ></el-input> -->
                                <span style="margin-left:40px;">{{info.end}}</span>
                              </el-form-item>
                              <el-form-item label="运行时间" style="margin-left:35%;font-size: 30px;">
                                <!-- <el-input v-model="info.runtime" ></el-input> -->
                                <span style="margin-left:40px; ">{{info.runtime}} 毫秒</span>
                              </el-form-item>
                              <el-form-item label="excel" style="margin-left:35%;font-size: 30px;">
                                <a :href="info.excel" style="margin-left:40px;">{{info.excel}}</a>
                              </el-form-item>
                              <el-form-item label="Report" style="margin-left:35%;font-size: 30px;">
                                <a :href="info.Report" style="margin-left:40px;" target="_blank">{{info.Report}}</a>
                              </el-form-item>
                            </el-form>
                        </div>
                    </div>
                    
                    <div class="centerdiv"></div> <!-- 中间线 -->

                    <div class="div2">
                        <div style="width: 100%;min-width: 300px;min-height: 300px;">
                            <div id="history_max" class="container" style="float: left;height: 300px;width: 600px;" ></div>

                            <div id="highcharts-more" class="container" style="float: left;height: 300px;width: 300px;"></div>
                            <div id="highcharts-line" class="container" style="float: left;height: 300px;width: 600px;"></div>

                            <!-- <div style="float: left;height: 300px;width: 300px;">
                            
                            </div> -->
                        </div>
                        <div>
                            <div style="float: left" id="history_min"></div>
                            <!-- div id="highcharts-more" class="container" style="float: left;height: 150px;width: 150px;"></div> -->
                            <div style="float: left" id="history_avg"></div>
                        </div>
                        
                    </div>

                    </div>
                    <el-divider></el-divider>
                    
                </el-collapse-item>
                <el-collapse-item name=2 style="font-size: 16px;" class="collapse1">
                    <template slot="title">
                      <h5 style="color: #c4c4c4; font-size: 16px">详细数据</h5>
                    </template>
                    <div>
        
                        <el-table
                        :data="ApiResList"
                        style="width: 100%">
                        <el-table-column type="expand">
                            <template slot-scope="props">
                                <el-form label-position="left" inline class="demo-table-expand">
                                    <el-form-item label="请求参数">
                                        
                                        <el-popover
                                          placement="bottom"
                                          width="400"
                                          height="auto"
                                          trigger="click">
                                          <span>{{ props.row.Params }}</span>
                                          <el-button slot="reference">显示全部</el-button>
                                        </el-popover>
                                    </el-form-item>
                                    <el-form-item label="返回结果">
                                        <el-popover
                                          placement="right"
                                          width="400"
                                          height="200"
                                          trigger="click">
                                          <pre> {{ JSON.parse(props.row.ResJson) }}</pre>
                                          <el-button slot="reference">显示全部</el-button>
                                        </el-popover>
                                        {{ JSON.parse(props.row.ResJson) }}
                                    </el-form-item>
                                </el-form>
                            </template>
                </el-table-column>
                <el-table-column label="接口ID" prop="ApiId">
                </el-table-column>
                <el-table-column label="接口名称" prop="ApiName"></el-table-column>
                <el-table-column label="接口路径" prop="ApiPath"></el-table-column>
                <el-table-column label="响应时间(MS)" prop="ResTime"></el-table-column>
                <el-table-column label="测试结果" prop="Status">
                    <template slot-scope="scope">
                    <el-tag :type="scope.row.Status === true ? 'success' : 'danger'"
                      disable-transitions>{{scope.row.Status}}
                    </el-tag>
                    </template>
                </el-table-column>
                <el-table-column  label="开始时间" prop="StartTime" :formatter="FormartTime"></el-table-column>
                <el-table-column  label="结束时间" prop="EndTime" :formatter="FormartTime"></el-table-column>  
                <el-table-column label="Md5" prop="Md5"></el-table-column>  
                </el-table>
            </div>

            </el-collapse-item>
            <el-collapse-item name=3 style="font-size: 16px;">
                <template slot="title">
                    <h5 style="color: #c4c4c4; font-size: 16px">详细数据</h5>
                </template>
            <div id="highmaps" class="container"></div>
        </el-collapse-item>
                
    </el-collapse>
            
            
        <!-- <div style="width: 100%;">
            <div class="div0">
            <div class="div1">2</div>
            <div class="div2">3</div> 
            <el-divider></el-divider>   
            </div>
        </div> -->
    <!-- </el-main> -->
    <!-- <el-footer>Footer</el-footer> -->
    </el-container>
    
</template>

<script>
import {historys,runhistorys,histrecently,historyTen,historyInfo} from '../../api/autopay'; 
import {stamptotime} from '../../js/dates'; 
import Highcharts from 'highcharts/highstock';

// import HighchartsComponent from '../../components/Highcharts/Highcharts';
import HighchartsMore from 'highcharts/highcharts-more';
import HighchartsDrilldown from 'highcharts/modules/drilldown';
import Highcharts3D from 'highcharts/highcharts-3d';
import Highmaps from 'highcharts/modules/map';
import Export from 'highcharts/modules/exporting'; 
import $ from 'jquery';
Export(Highcharts);
HighchartsMore(Highcharts)
HighchartsDrilldown(Highcharts);
Highcharts3D(Highcharts);
Highmaps(Highcharts);


export default {
    name: 'TestReport',
    data(){
        return { 
            activeNames: ["1","2","3"],
            ApiResList: [],
            hists:[],
            averages : [],
            T:[],
            ten:[],
            chart : null,
            info :{
                runtime: "100ms",
                Count: 0,
                start: "2020-10-10 19:00:00",
                end: "2020-10-10 19:00:00",
                error: 0.0,
                success: 9.0,
                excel:"",
                Report:""

            },
            apimd5:this.$route.params.Md5str,
            history:[],
            styles: {
              width: 600,
              height: 400
            }

        }
    },
    mounted:function () {
        this.Gethistory();
        this.Runhistory();
        this.highmaps();
        this.HistRecently();
        this.History_Info()
    },//mounted
    methods: {
        FormartTime(row, column, cellValue, index) {
            var d = new Date(cellValue);    //根据时间戳生成的时间对象
            var date = (d.getFullYear()) + "-" +(d.getMonth() + 1) + "-" +(d.getDate()) + " " + (d.getHours()) + ":" + (d.getMinutes()) + ":" + (d.getSeconds());
            return date
        },
        Formats(msg){
            return msg.Times / 1000/1000 
        },
        HistoryInfo(seriesinfo,series_avg,series_min) {
            Highcharts.chart('history_max', {
                title: {
                    text: '接口响应时间总览'
                },
                subtitle: {
                    text: '平均响应、最长响应、最短响应'
                },

                exporting: {
                    enabled: true,   // 关闭导出按钮
                    url: 'https://export.highcharts.com.cn'
                },
                // navigation: {
                //     buttonOptions: {  // 关闭导出按钮，效果同上
                //         enabled: true
                //     }
                // },
                labels: {
                    items: [{
                        html: '最短响应时间',
                        style: {
                            left: '7px',
                            top: '0px',
                            color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
                        }
                    }]
                },
                xAxis: {
                    type: 'category'
                },
                yAxis: {
                    title: {
                        text: '响应时间'
                    }
                },
                legend: {
                    enabled: false
                },
                plotOptions: {
                    showInLegend: true,
                    series: {
                        borderWidth: 0,
                        dataLabels: {
                            enabled: true,
                            format: '{point.y} ms'
                        }
                    }
                },
                tooltip: {
                    headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                    pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b> ms<br/>'
                },
                series: [
                {
                    name: '最短响应时间',
                    colorByPoint: true,
                    type: 'pie',
                    center: [10, 10],
                    size: 30,
                    showInLegend: false,
                    dataLabels: {
                        enabled: false
                    },
                    data: series_min
                },{
                    name: '最长响应时间',
                    type: 'spline',
                    colorByPoint: true,
                    data: seriesinfo
                },
                {
                    name: '平均响应时间',
                    colorByPoint: true,
                    data: series_avg
                }]
                
            });
        },
        History_Info(){
          var that = this;
          historyInfo().then(res => {
            let {code,msg,data} = res;
            var series = [];
            var series_min = [];
            var series_avg = [];
            if (code == 200) {
                that.$message("获取成功");
                // that.history = data;
                for (var i = data.length - 1; i >= 0; i--) {
                  var item_maxs = {};
                  var item_minx = {};
                  var item_avg = {};
                  
                  item_avg["name"]=data[i].name;
                  item_avg["y"]= data[i].avgs;
                  item_maxs["name"]=data[i].name;
                  item_maxs["y"]= data[i].maxs;
                  item_minx["name"]= data[i].name;
                  item_minx["y"]= data[i].mins;
                  series_avg.push(item_avg);
                  series_min.push(item_minx);
                  series.push(item_maxs);
                  // series.push(item_minx)
                }
                that.HistoryInfo(series,series_avg,series_min);
            }
            
              
          }).catch(
              (err) => {
                console.log(err);
                  that.$message.error("接口失败:\n");
              }
          )
        },
        Ten(){
            var that = this;
            let par = {"id":that.ApiResList[0].ApiId}
            historyTen(par).then(res => {
            let {code,msg,data} = res;

            if (code == 200) {
                that.$message("获取成功");
                that.averages = [];
                for (var i =  0; i < data.length; i++) {

                  // var  tmp = []
                  // tmp.push(data[i].StartTime);
                  // tmp.push(data[i].ResTime);
                  var times = stamptotime(data[i].StartTime);

                  that.T.push(times);
                  that.averages.push(data[i].ResTime);
                  // that.T.push(data[i].create_at);
                }

                that.Linechart();
            }
              
          }).catch(
              (err) => {
                console.log(err);
                  that.$message.error("接口失败:\n");
              }
          )
        },
        HistRecently(){
            histrecently().then(res => {
                let {code,msg,data} = res;
                if (code == 200){
                    this.$message("获取成功");
                    this.hists = data;
                }
            }).catch(
                (err) => {
                    this.$message.error("接口请求失败:\n");
                }
            )

        },
        Gethistory(){
            let par = {"md5":""}
            if (this.apimd5 == ""){
                par["md5"] = this.apimd5
            }

            historys(par).then(res => {
                let {code,msg,data} = res;
                if (code == 200) {
                    this.$message("历史记录获取成功");
                    this.ApiResList = data.list;
                    // this.info.Count = data.count;
                    // this.info.error = data.err;
                    
                    this.Ten();
                    
                }
                
            }).catch(

                (err) => {
                  console.log(err);
                  this.$message.error("接口失败:\n");
                }
            )
        },
        Runhistory(){
            let par = {"md5":""}
            if (this.apimd5 != ""){
                par["md5"] = this.apimd5
            }
            runhistorys(par).then(res => {
                let {code,msg,data} = res;
                if (code == 200) {
                    this.$message("获取成功");
                    this.info.Count = data.count;
                    this.info.error = data.err;
                    this.info.start = data.StartTime;
                    this.info.runtime = data.ResTime;
                    this.info.end = data.EndTime;
                    this.info.success = data.suc;
                    this.info.excel = data.ExcPath;
                    this.info.Report = data.ReportPath;
                    this.moreChart();

                }
                
            }).catch(
                (err) => {
                    this.$message.error("接口失败:\n");
                }
            )
        },
        handleChange(val) {
            console.log(this.activeNames);
        },
        Linechart(){
          Highcharts.chart('highcharts-line', {
            title: {
              text: "《"+this.ApiResList[0].ApiName+'》近10次'
            },
            xAxis: {
              type: 'datetime',
              categories: this.T,
              dateTimeLabelFormats: {
                day: '%Y-%m-%d %H:%M:%S'
              },
              crosshairs: true
              
            },
            yAxis: {
              title: {
                text: "毫秒数"
              }
            },
            tooltip: {
              shared: true,
              valueSuffix: 'ms'
            },

            series: [{
              name: '响应时间',
              data: this.averages,
              zIndex: 1, // 控制显示层叠
              marker: {
                fillColor: 'white',
                lineWidth: 2,
                lineColor: Highcharts.getOptions().colors[0]
              }
            }
            // , {
            //   name: '范围',
            //   data: ranges,
            //   type: 'arearange',
            //   lineWidth: 0,
            //   linkedTo: ':previous', // 与上一个数据列进行关联，或者直接赋值 0
            //   color: Highcharts.getOptions().colors[0],
            //   fillOpacity: 0.3,
            //   zIndex: 0,
            //   marker: {
            //     enabled: false
            //   }
            // }
            ]
          });
        },
        moreChart() {
          var options  = this.getMoreOptions();
            
          if(this.chart) {
            this.chart.destroy();
          };

          this.chart = new Highcharts.Chart( 'highcharts-more', options);
        },
        getMoreOptions() {
            return {
                chart: {
                  plotBackgroundColor: null,
                  plotBorderWidth: null,
                  plotShadow: false,
                    type: 'pie',
                    options3d: {
                        enabled: true,
                        alpha: 45,
                        beta: 0
                    }
                },
                title: {
                    text: "接口成功率"
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                colors:['#F25929',"#70AD47",'#ffaca8','#64bcec'],
                credits: {
                    enabled: false
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        depth: 35,
                        dataLabels: {
                            enabled: true,
                            format: '{point.name}'
                        },
                        showInLegend: true
                    }
                },
                series: [{
                    type: 'pie',
                    name: '占比',
                    data: [
                        {
                          name:'失败数',   
                          y:0,
                          sliced: true,
                          selected: true},
                        {
                          name:'成功数',   
                          y:9,
                          sliced: true,
                          selected: true
                        }
                    ]
                }]
            }
        },
        highmaps() {
          Highcharts.setOptions({
            lang: {
                drillUpText: '< 返回 “{series.name}”'
            }
          });
          var map = null,
              geochina = 'https://data.jianshukeji.com/jsonp?filename=geochina/';
          $.getJSON(geochina + 'china.json&callback=?', function(mapdata) {
              var data = [];
              // 随机数据
              Highcharts.each(mapdata.features, function(md, index) {
                  var tmp = {
                      name: md.properties.name,
                      value: Math.floor((Math.random() * 100) + 1) // 生成 1 ~ 100 随机值
                  };
                  if(md.properties.drilldown) {
                      tmp.drilldown = md.properties.drilldown;
                  }
                  data.push(tmp);
              });
              map = new Highcharts.Map('highmaps', {
                  chart: {
                      events: {
                          drilldown: function(e) {
                              console.log(e);
                              // 异步下钻
                              if (e.point.drilldown) {
                                  var pointName = e.point.properties.fullname;
                                  map.showLoading('下钻中，请稍后...');
                                  // 获取二级行政地区数据并更新图表
                                  $.getJSON(geochina +   e.point.drilldown + '.json&callback=?', function(data) {
                                      data = Highcharts.geojson(data);
                                      Highcharts.each(data, function(d) {
                                          if(d.properties.drilldown) {
                                              d.drilldown = d.properties.drilldown;
                                          }
                                          d.value = Math.floor((Math.random() * 100) + 1); // 生成 1 ~ 100 随机值
                                      });
                                      map.hideLoading();
                                      map.addSeriesAsDrilldown(e.point, {
                                          name: e.point.name,
                                          data: data,
                                          dataLabels: {
                                              enabled: true,
                                              format: '{point.name}'
                                          }
                                      });
                                      map.setTitle({
                                          text: pointName
                                      });
                                  });
                              }
                          },
                          drillup: function() {
                              map.setTitle({
                                  text: '中国'
                              });
                          }
                      }
                  },
                  title: {
                      text: '中国地图'
                  },
                  subtitle: {
                      text: '<a href="https://www.hcharts.cn/mapdata">点击查看地图数据及详情，注意县级数据为收费数据，如果您有需要，请联系我们购买</a>'
                  },
                  mapNavigation: {
                      enabled: true,
                      buttonOptions: {
                          verticalAlign: 'bottom'
                      }
                  },
                  tooltip: {
                      useHTML: true,
                      headerFormat: '<table><tr><td>{point.name}</td></tr>',
                      pointFormat: '<tr><td>全称</td><td>{point.properties.fullname}</td></tr>' +
                      '<tr><td>行政编号</td><td>{point.properties.areacode}</td></tr>' +
                      '<tr><td>父级</td><td>{point.properties.parent}</td></tr>' +
                      '<tr><td>经纬度</td><td>{point.properties.longitude},{point.properties.latitude}</td></tr>' ,
                      footerFormat: '</table>'
                  },
                  colorAxis: {
                      min: 0,
                      minColor: '#fff',
                      maxColor: '#006cee',
                      labels:{
                          style:{
                              "color":"red","fontWeight":"bold"
                          }
                      }
                  },
                  series: [{
                      data: data,
                      mapData: mapdata,
                      joinBy: 'name',
                      name: '中国地图',
                      states: {
                          hover: {
                              color: '#a4edba'
                          }
                      }
                  }]
              });
          });
        },
    },
    components: {
      // HighchartsComponent
    },
}
</script>

<style scoped>

.centerdiv{
    float:left;
    width:50px;
    /*border-right: 1px  red;*/
    /*border-style:solid;*/
    border-right:1px solid #DCDFE6;
    padding-bottom:1600px;  /*关键*/
    margin-bottom:-1600px;  /*关键*/
 
}
.collapse1{
    margin-bottom: 20px;
    font-size: 16px;
    color: #c4c4c4;
}
.div_t{
    width: 100%;
    height: 50px;
    float:left;
    text-align: center;
    margin-bottom: 10px;
    /*border: 20px;*/
    /*padding: 10px;*/
    border-color: #FFFFFF;
    background-color: #ffffff;
}

.div_line{
    /*background-color: #F2B4B4;*/
    overflow: hidden;
    padding: 10px;
    width: 100%;
    min-height: 500px;
    /*float:left;*/
    
}

.div0{
    /*background-color: #F2B4B4;*/
    overflow: hidden;
    padding: 10px;
    width: 100%;
    /*float:left;*/
    height: 500px;
    
}
.div1{
    /*background-color: #D3E723;*/
    /*overflow: hidden;*/
    width: 39%;
    float: left;
    margin-left: 0px;
    /*font-size: 12px;*/
    height: auto;
    /*text-align: center;*/
    margin-bottom: 10px;
}
.div2{
    /*background-color: #461CDC;*/
    overflow: hidden;
    width: 56%;
    height: auto;
    float: right;
    text-align: center;
    margin-bottom: 10px;

}
.res{
    width: 55%; 
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    overflow-y:auto;
    overflow: auto;
    height: 300px;
    width: 100%;
    margin-top: 30px;
    padding: 20px;
    border-bottom-left-radius:5px;
    border-top-right-radius:5px;
    border-top-left-radius:5px;
    background-color: rgba(11, 47, 247, 0.07);
}
.demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
